<template>
  <el-button circle @click='configDark'>
    <el-icon v-if='layoutStyle === "light"'>
      <Sunny />
    </el-icon>
    <el-icon v-else>
      <Moon />
    </el-icon>
  </el-button>

</template>




<script setup lang="ts">
const props = withDefaults(defineProps<{
  layoutStyle?: 'light' | 'dark'
}>(), {
})


const emit = defineEmits(['click'])

const configDark = (): void => {
  const element = document.querySelector('html') as HTMLElement | null;
  if (element) {
    if (element.className == 'dark') {
      element.className = 'light';
    } else {
      element.className = 'dark';
    }
    console.log(element.className, 'element.className')
    emit('click', element.className)
  }
}
</script>
